<template>
	<!-- 单选 -->
	<SingleSelect :index="index" @singleSelect="singleSelectEmit" v-show="type === 'SingleSelect'">
	</SingleSelect>
	<!-- 多选 -->
	<MultiSelect :index="index" @multiSelect="multiSelectEmit" v-show="type === 'MultiSelect'">
	</MultiSelect>
	<!-- 填空 -->
	<FillInBlanks :index="index" @fillInBlanks="fillInBlanksEmit" v-show="type === 'FillInBlanks'">
	</FillInBlanks>
	<!-- 判断 -->
	<TrueOrfalse :index="index" @trueOrfalse="trueOrfalseEmit" v-show="type === 'TrueOrfalse'">
	</TrueOrfalse>
	<!-- 简答 -->
	<ShortAnswer :index="index" @shortAnswer="shortAnswerEmit" v-show="type === 'ShortAnswer'">
	</ShortAnswer>

	<view style="width: 100%;;height: 60px;"></view>
	{{detail}}
	<view class="bottom">
		<view class="accuracy">
			<image class="size" src="@/static/accuracy.png" mode=""></image>
			正确：{{ detail.correct }}
		</view>
		<view class="wrong">
			<image class="size" src="@/static/wrong.png" mode=""></image>
			错误： {{ detail.wrong }}
		</view>
		<view class="app" @click="toPicList">
			<image class="size" src="@/static/app.png" mode=""></image>
			<text @click="toPicList"></text>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" background-color="#fff">
		<view class="popupTop">
			<view class="accuracy">
				<image class="size" src="@/static/accuracy.png" mode=""></image>
				正确：{{ detail.correct }}
			</view>
			<view class="wrong">
				<image class="size" src="@/static/wrong.png" mode=""></image>
				错误： {{ detail.wrong }}
			</view>
			<view class="app" @click="toPicList">
				<image class="size" src="@/static/app.png" mode=""></image>
			</view>
		</view>
		<view style="overflow-y: auto;height: 400px;overflow-x: hidden;">
			<!-- 题目编号 -->
			<view v-for="(item,index) in setExam.topic">
				<text class="title">
					{{ item.name }}
				</text>
				<uni-row :gutter="10">
					<uni-col :span="4" v-for="(ite,inx) in item.question" :key="inx">
						<view class="popupBody" :class="ite.is_correct ===  2? 'questionSuccess' : 'questionError'"
							@click="questionIndex(item.mark,inx)">
							{{ inx+1 }}
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view style="width: 100%;;height: 60px;">

		</view>
	</uni-popup>
</template>

<script>
	import SingleSelect from "../topic/components/item.vue";
	import ShortAnswer from "../topic/components/shortAnswer.vue";
	import MultiSelect from "../topic/components/multiSelect.vue";
	import TrueOrfalse from "../topic/components/trueOrfalse.vue";
	import FillInBlanks from "../topic/components/fillInBlanks.vue";
	import {
		getPaper,
		submitPaper
	} from '@/api/exam.js';
	import {
		exam
	} from '@/stores/exam.js';
	import {
		mixin
	} from '@/static/mixin.js'
	export default {
		mixins: [mixin],
		onLoad: function(option) {
			this.detail.wrong = option.wrong;
			console.log(this.setExam.topic, "1111111")
			let that = this
		
			for (var key in this.setExam.topic) {
			  if (this.setExam.topic.hasOwnProperty(key)) {
			    var subItem = this.setExam.topic[key];
			    // 执行你的操作，例如打印子项
			    console.log(key,"子项");
				if(subItem!=''){
					that.type = key
				}
			  }
			}
			console.log(that.type,"11111");
		},
		created() {
			this.setExam = exam();
		},
		data() {
			return {
				detail: {
					accuracy: '',
					wrong: ''
				},
				index: '',
				setExam: '',
				type: 'SingleSelect',
				countdown: '', // 倒计时
				topic: [],
				paper: {
					paper_id: '',
					exam_id: ''
				},
				success: ''
			};
		},
		components: {
			SingleSelect,
			ShortAnswer,
			MultiSelect,
			TrueOrfalse,
			FillInBlanks
		},
		methods: {
			// 切换题目
			questionIndex(mark, index) {
				this.type = mark;
				this.index = index;
				this.$refs.popup.close();
			},
			toPicList() {
				this.$refs.popup.open('bottom')
			},
			singleSelectEmit(value) {
				if (value === 'next') {
					if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'
					} else if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'
					} else if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer'
					} else if (this.setExam.topic.TrueOrfalse.length != 0) {
						this.type = 'TrueOrfalse'
					}

				}
			},
			multiSelectEmit(value) {
				if (value === 'break') {
					this.type = 'SingleSelect';

				} else {
					if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'
					} else if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer'
					} else if (this.setExam.topic.TrueOrfalse.length != 0) {
						this.type = 'TrueOrfalse'
					}
				}
			},
			fillInBlanksEmit(value) {
				if (value === 'break') {
					if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'

					} else {
						this.type = 'SingleSelect'

					}
				} else {
					if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer'
					} else {
						this.type = 'TrueOrfalse'
					}
				}
			},
			shortAnswerEmit(value) {
				if (value === 'break') {
					if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'

					} else if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'

					} else if (this.setExam.topic.SingleSelect.length != 0) {
						this.type = 'SingleSelect'

					}
				} else {
					this.type = 'TrueOrfalse';
				}
			},
			trueOrfalseEmit(value) {
				if (value === 'break') {
					if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer';

					} else if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'

					} else if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'

					} else if (this.setExam.topic.SingleSelect.length != 0) {
						this.type = 'SingleSelect'

					}
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.questionError {
		background-color: #edd2d2;
		border: #b0413d 1px solid;
		color: #b0413d;
	}

	.card {
		font-size: 18px;
		border-radius: 5px;
		margin: 10px;
		background-color: #fff;

		.top {
			border-bottom: #e9e9e9 solid 2px;
			padding: 20px;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 40px;
				height: 30px;
			}
		}

		.cardBody {
			padding: 20px;
		}

		.options {
			border-radius: 5px;
			border: #e1e1e1 1px solid;
			margin-top: 20px;
			padding: 15px;
			padding-left: 0;
		}
	}

	.time {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 60px;
		color: #6b6b6b;
	}

	.bottom {
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		padding-bottom: 40px;
		box-sizing: border-box;
		font-size: 19px;

		.accuracy {
			color: #2aae67;
		}

		.wrong {
			color: #b0413d;
		}

		.accuracy,
		.wrong {
			vertical-align: middle;
		}
	}

	.popupTop {
		background-color: #fff;
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		font-size: 19px;
		margin-bottom: 20px;
	}

	.questionSuccess {
		background-color: #2aae67;
		border: #2aae67 1px solid;
		color: #fff;
	}

	.popupBody {
		margin-left: 6px;
		margin-right: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		border: $uni-border-color 1px solid;
		// background-color: #6b6b6b;
		border-radius: 50%;
		margin-top: 10px;
	}

	.title {
		display: block;
		width: 100%;
		text-align: center;
	}

	.success {
		border-radius: 5px;
		background-color: #2aae67;
		border: #2aae67 2px solid;
		margin-top: 10px;
		padding: 15px;
		color: #2aae67;
		padding-left: 0;
	}

	.size {
		width: $uni-img-size-base;
		height: $uni-img-size-base;
		vertical-align: middle;
	}

	.textColor {
		color: $uni-color-primary;
	}

	.app {
		image {
			vertical-align: bottom;
		}
	}
</style>
